// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Spin, Modal, Form, Select, Input, message, Icon } from 'antd';
import LimitInput from '@/components/LimitInput';
import cn from 'classnames';
// import moment from 'moment';
import { formatRangeTime } from '@/pages/RecruitEmail/utils';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useInterview, useCompanyName, useInterviewWay } from '@/pages/RecruitEmail/hooks';
import {
    InterviewBoxPcB,
    InterviewResult,
    InterviewDetail,
    ButtonPc as Button
} from '@/pages/RecruitEmail/pc/components';
import { refuseInterview } from '@/pages/RecruitEmail/service/interview';
import { STATUS } from '@/pages/RecruitEmail/constants';
// import { history } from 'umi'
// import refusePic from '@/pages/RecruitEmail/images/interview-bg-refuse.png';
import acceptPic from '@/pages/RecruitEmail/images/interview-bg-accept.png';
import initPic from '@/pages/RecruitEmail/images/interview-bg-new.png';
// import { Icon as CustomIcon } from '@/pages/Recruitment/components';
import BizIcon from '@/components/BizIcon';

// import { RecruitContext } from '@/pages/RecruitEmail/Context';
import styles from './index.less';

const { Option } = Select;
// const { TextArea } = Input;

const listReason = [
    {
        label: '已找到新工作',
        value: 1
    },
    {
        label: '留在原公司',
        value: 2
    },
    {
        label: '办公地点较远',
        value: 3
    },
    {
        label: '其他',
        value: 99
    }
];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const InterviewInvitation = props => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { nid, id, form } = props;
    const { getFieldDecorator } = form;

    const [title, setTitle] = React.useState('');
    const [content, setContent] = React.useState('');
    const [showRefuse, setShowRefuse] = React.useState(false);
    const [titleIcon, setTitleIcon] = React.useState(null);
    const [showMore, setShowMore] = React.useState(false); // 查看更多
    const {
        status,
        data,
        loading,
        submitLoading,
        fetchDetail,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        handleAccept,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        // handleRefuse,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        handleUpdate,
        handleCheck
    } = useInterview(nid, id);
    // const context = React.useContext(RecruitContext);
    // const { getTotalDesc } = context;
    React.useEffect(() => {
        switch (status) {
            case STATUS.INITIAL:
                setTitle('请确认您的面试安排并及时接受邀请');
                setContent('以免错失本次面试机会');
                setTitleIcon(null);
                break;
            case STATUS.ACCEPT:
                setTitleIcon('accept');
                setTitle('已接受面试');
                setContent('请尽快填写《应聘登记表》');
                // if (data?.registerStatus !== 1) {
                //     setTitle('已接受面试');
                //     setContent('请尽快填写《应聘登记表》');
                // } else {
                //     setTitle('提交成功，您已完成面试确认');
                //     setContent('您已接收本次面试，期待与您的面谈！');
                // }
                break;
            case STATUS.UPDATE:
                setTitleIcon('timeAdjusted');
                setTitle('已收到反馈的可面试时间~ 面试时间等待确认');
                setContent('请耐心等待HR联系，最终的面试安排将再次通过邮件通知');
                break;
            case STATUS.REFUSE:
                setTitleIcon('shixiao');
                setTitle('已拒绝面试');
                setContent('');
                break;
            default:
                setTitle('请确认您的面试安排并及时接受邀请');
                setContent('以免错失本次面试机会');
                setTitleIcon(null);
                break;
        }
    }, [status, data]);
    const handleRefuse = () => {
        form.resetFields();
        setShowRefuse(true);
    };

    const btnView = React.useMemo(() => {
        let view = null;
        switch (status) {
            case STATUS.INITIAL:
                view = (
                    <div
                        style={{
                            marginTop: 20,
                            marginBottom: 63,
                            display: 'flex',
                            justifyContent: 'center'
                        }}
                    >
                        <Button
                            type="primary"
                            style={{ marginRight: 20 }}
                            loading={submitLoading}
                            onClick={handleAccept}
                        >
                            接受
                        </Button>
                        <Button
                            onClick={handleRefuse}
                            style={{
                                marginRight: 20,
                                fontWeight: 400,
                                color: '#49536C',
                                fontFamily: 'PingFangSC-Regular'
                            }}
                        >
                            拒绝
                        </Button>
                        <Button
                            type="primary"
                            ghost
                            onClick={handleUpdate}
                            style={{ fontWeight: 400, color: '#FF9E00', fontFamily: 'PingFangSC-Regular' }}
                        >
                            修改时间
                        </Button>
                    </div>
                );
                break;
            // case STATUS.ACCEPT:
            //     if (data?.registerStatus === 1) {
            //         view = (
            //             <div
            //                 style={{
            //                     marginTop: 20,
            //                     marginBottom: 87,
            //                     display: 'flex',
            //                     justifyContent: 'center'
            //                 }}
            //             >
            //                 <Button
            //                     type="primary"
            //                     style={{ marginRight: 20, width: 210 }}
            //                     loading={submitLoading}
            //                     onClick={handleCheck}
            //                 >
            //                     查看应聘登记表
            //                 </Button>
            //                 <Button
            //                     onClick={handleRefuse}
            //                     style={{
            //                         marginRight: 20,
            //                         fontWeight: 400,
            //                         color: '#49536C',
            //                         fontFamily: 'PingFangSC-Regular'
            //                     }}
            //                 >
            //                     拒绝
            //                 </Button>
            //                 <Button
            //                     type="primary"
            //                     ghost
            //                     onClick={handleUpdate}
            //                     style={{ fontWeight: 400, color: '#FF9E00', fontFamily: 'PingFangSC-Regular' }}
            //                 >
            //                     修改时间
            //                 </Button>
            //             </div>
            //         );
            //     }
            //     break;
            case STATUS.UPDATE:
                break;
            case STATUS.REFUSE:
                break;
            default:
                break;
        }
        return view;
    }, [status, data]);
    const ImagePic = React.useMemo(() => {
        let view = null;
        switch (status) {
            case STATUS.INITIAL:
                view = acceptPic;
                break;
            case STATUS.ACCEPT:
                view = acceptPic;
                break;
            case STATUS.UPDATE:
                view = initPic;
                break;
            case STATUS.REFUSE:
                view = initPic;
                break;
            default:
                break;
        }
        return view;
    }, [status]);
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
    };
    // eslint-disable-next-line no-redeclare
    const [refuseSubmitLoading, setRefuseSubmitLoading] = React.useState(false);

    const handleSubmit = () => {
        form.validateFieldsAndScroll(async (err, values) => {
            // console.log('handleSubmit -> values', values);
            if (!err) {
                // console.log(JSON.stringify(params));
                setRefuseSubmitLoading(true);
                const { code, msg } = await refuseInterview(
                    {
                        ...values
                    },
                    nid
                );
                setRefuseSubmitLoading(false);
                if (code === 10000) {
                    setShowRefuse(false);
                    fetchDetail();
                    // getTotalDesc();
                    // history.goBack();
                } else if (msg) {
                    message.error(msg);
                }
            }
        });
    };
    const refuseModal = (
        <Modal
            visible={showRefuse}
            onOk={() => {
                handleSubmit();
            }}
            onCancel={() => {
                setShowRefuse(false);
            }}
            confirmLoading={refuseSubmitLoading}
            title="拒绝面试"
            centered
        >
            <div className={styles.refuseCon}>
                <span className={styles.refuseInfo}>很遗憾没能跟您进一步沟通，希望您能提供拒绝面试的原因</span>
                <Form {...formItemLayout}>
                    <Form.Item label="原因">
                        {getFieldDecorator('reasonCode', {
                            initialValue: undefined,
                            rules: [
                                {
                                    required: true,
                                    message: '请选择原因'
                                }
                            ]
                        })(
                            <Select
                                style={{ width: '100%' }}
                                placeholder="请选择原因"
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                            >
                                {listReason.map(item => (
                                    <Option value={item.value} key={item.value}>
                                        {item.label}
                                    </Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label="备注">
                        {getFieldDecorator('remark', {
                            initialValue: '',
                            rules: [
                                {
                                    required: form.getFieldValue('reasonCode') === 99,
                                    message: '请输入备注'
                                }
                            ]
                        })(
                            <LimitInput
                                placeholder="请输入备注"
                                area
                                maxLength={4000}
                                autoSize={{ minRows: 3, maxRows: 6 }}
                            />
                        )}
                    </Form.Item>
                </Form>
            </div>
        </Modal>
    );

    const interviewTimeList = React.useMemo(() => {
        let resultArray = [];
        if (data?.interviewTimeList?.length > 4) {
            if (showMore) {
                resultArray = data?.interviewTimeList;
            } else {
                resultArray = data?.interviewTimeList?.slice(0, 4);
            }
        } else {
            resultArray = data?.interviewTimeList;
        }
        return resultArray;
    }, [JSON.stringify(data), showMore]);

    const [wayLabel, wayDetail] = useInterviewWay({
        interviewWayName: data?.interviewWayName,
        interviewLocation: data?.interviewLocation,
        videoLink: data?.videoLink
    });

    const list = React.useMemo(() => {
        if (data) {
            return [
                {
                    key: '面试岗位',
                    showIcon: true,
                    iconType: 'infos_namecard_icon_default1',
                    value: data?.dutyName || '--'
                },
                {
                    key: '面试轮次',
                    iconType: 'mianshishenqing',
                    showIcon: true,
                    value: data?.interviewRoundName || '--'
                },
                {
                    key: '面试时间',
                    showIcon: true,
                    iconType: 'timeAdjusted',
                    value:
                        status === STATUS.UPDATE ? (
                            <div>
                                <div style={{ display: 'flex' }}>
                                    <span style={{ color: '#FFA22D', marginBottom: 10 }}>待定</span>
                                </div>

                                <div className={styles.timeUpdate}>
                                    {interviewTimeList?.map((item, index) => (
                                        <div className={styles.timeFlex} key={index}>
                                            <span className={styles.time}>
                                                {formatRangeTime(item.startTime, item.endTime)}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                                {data?.interviewTimeList?.length > 4 && !showMore && (
                                    <div className={styles.loadMoreCon} onClick={() => setShowMore(!showMore)}>
                                        <span className={styles.readMore}>查看更多</span>
                                        <BizIcon
                                            type="unfold_arrow_o"
                                            style={{ fontSize: 16, marginLeft: 2, color: 'rgba(0,0,0,0.15)' }}
                                        />
                                        {/* <CustomIcon
                                    type="Icon_moredown16"
                                    theme="filled"
                                    style={{ fontSize: 16, marginLeft: 2, color: 'rgba(0,0,0,0.15)' }}
                                /> */}
                                    </div>
                                )}
                            </div>
                        ) : (
                            <div>
                                {data?.interviewTimeStr || '--'}
                                {/* {status === STATUS.ACCEPT && (
                            <span
                                onClick={handleUpdate}
                                style={{
                                    cursor: 'pointer',
                                    display: 'inline-block',
                                    textAlign: 'right',
                                    color: '#5590F6',
                                    fontSize: '14px',
                                    fontWeight: 400,
                                    lineHeight: '26px'
                                }}
                            >
                                <Icon type="edit" theme="twoTone" />
                                修改时间
                            </span>
                        )} */}
                            </div>
                        )
                },
                {
                    key: wayLabel,
                    iconType: 'infos_namecard_icon_default',
                    showIcon: true,
                    value: wayDetail
                },

                {
                    key: '面试方式',
                    iconType: 'mianshifangshi',
                    showIcon: true,
                    value: data?.interviewWayName
                }
            ];
        }
        return [];
    }, [data, showMore]);
    const leftRight = () => {
        let show = true;
        if (status === STATUS.INITIAL || status === STATUS.REFUSE || status === STATUS.UPDATE) {
            show = false;
        }

        return show;
    };
    const showLeftRight = React.useMemo(leftRight, [status]);

    const iconColor = () => {
        let color = '#000';
        switch (status) {
            case STATUS.ACCEPT:
                color = '#44C69D';
                break;
            case STATUS.REFUSE:
                color = '#BCC1CD';
                break;
            case STATUS.UPDATE:
                color = '#5590F6';
                break;
            default:
                break;
        }

        return color;
    };
    // const interviewAdaptLeft = () => {
    //     let left = '#162px';
    //     if (interviewWay === 5) {
    //         left = '438px';
    //     } else {
    //         switch (status) {
    //             case STATUS.ACCEPT:
    //                 if (data?.registerStatus === 1) {
    //                     left = '250px';
    //                 } else {
    //                     left = '250px';
    //                 }

    //                 break;
    //             case STATUS.REFUSE:
    //                 left = '237px';
    //                 break;
    //             case STATUS.UPDATE:
    //                 left = '190px';
    //                 break;
    //             default:
    //                 break;
    //         }
    //     }

    //     return left;
    // };
    // const showTip = () => {
    //     let tip = true;
    //     if (interviewWay === 5) {
    //         if (result?.state === 2) {
    //             tip = true;
    //         } else {
    //             tip = false;
    //         }
    //     } else {
    //         tip = true;
    //     }
    //     return tip;
    // };
    const leftView = () => (
        <div
            style={{
                maxWidth: 600,
                margin: '241px auto 227px auto',
                padding: '0 98px',
                boxSizing: 'border-box'
            }}
        >
            <InterviewResult
                type={status}
                show={data?.registerStatus !== 1}
                onClick={handleCheck}
                style={{ marginTop: 61 }}
            />

            {btnView}
        </div>
    );
    const rightView = () => (
        <div
            style={{
                maxWidth: status === STATUS.UPDATE ? 674 : 600,
                margin: '109px auto 129px auto',
                boxSizing: 'border-box'
            }}
        >
            <div className={styles.resultTitle}>面试信息</div>
            <div className={cn(styles.detailCon)}>
                <InterviewDetail
                    dataSource={list}
                    // style={{ marginBottom: 16 }}
                    keyStyle={{
                        fontWeight: 400,
                        height: '22px',
                        fontSize: '14px',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        color: status === STATUS.REFUSE ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.45)',
                        lineHeight: '22px'
                    }}
                    valueStyle={{
                        height: '26px',
                        fontSize: '18px',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        fontWeight: 400,
                        color: status === STATUS.REFUSE ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.85)',
                        lineHeight: '26px'
                    }}
                />
            </div>
        </div>
    );

    const leftview2 = () => (
        <div
            style={{
                maxWidth: status === STATUS.UPDATE ? 674 : 504,
                margin: '0 auto',
                boxSizing: 'border-box'
            }}
        >
            <InterviewResult
                type={status}
                show={data?.registerStatus !== 1}
                onClick={handleCheck}
                style={{ marginTop: 61 }}
            />

            <div
                className={cn(styles.detailCon, {
                    [styles.mb46]: status === STATUS.ACCEPT,
                    [styles.mb79]: status === STATUS.UPDATE || status === STATUS.REFUSE,
                    [styles.trans]: status === STATUS.REFUSE
                })}
            >
                <InterviewDetail
                    dataSource={list}
                    // style={{ marginBottom: 16 }}
                    keyStyle={{
                        fontWeight: 400,
                        height: '22px',
                        fontSize: '14px',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        color: status === STATUS.REFUSE ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.45)',
                        lineHeight: '22px'
                    }}
                    valueStyle={{
                        height: '26px',
                        fontSize: '18px',
                        fontFamily: 'PingFangSC-Regular, PingFang SC',
                        fontWeight: 400,
                        color: status === STATUS.REFUSE ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.85)',
                        lineHeight: '26px'
                    }}
                />
            </div>
            {btnView}
            {refuseModal}
        </div>
    );

    return (
        <div className={styles.interviewPc}>
            <Spin spinning={loading}>
                {status !== -1 && data !== null && (
                    <InterviewBoxPcB
                        titleProps={{
                            src: ImagePic,
                            // titleAfter: companyName,
                            title,
                            content,
                            wrap: status === STATUS.UPDATE,
                            sort: status === STATUS.UPDATE,
                            picStyle:
                                status === STATUS.REFUSE
                                    ? { marginBottom: 30, marginLeft: 193, marginTop: 30 }
                                    : { marginBottom: 8, marginTop: 22 },
                            iconType: titleIcon,
                            iconStyle: { color: iconColor(), marginRight: 12 },
                            style: {
                                height: status === STATUS.UPDATE ? '192px' : 'auto'
                                // paddingLeft: interviewAdaptLeft()
                            }
                        }}
                        left={showLeftRight ? leftView() : leftview2()}
                        right={rightView()}
                        showLeftRight={showLeftRight}

                        // showTip={showTip()}
                        // show={status === STATUS.ACCEPT && data?.registerStatus !== 1}
                        // onClick={handleCheck}
                    ></InterviewBoxPcB>
                )}
                {refuseModal}
            </Spin>
        </div>
    );
};
export default Form.create()(InterviewInvitation);
